<template>
  <div>
    <el-upload
      action=""
      list-type="text"
      :file-list="list"
      :on-change="handleChange"
      :before-upload ='beforeUpload'
      :http-request="handleUpload"
      class="avatar-uploader"
      :show-file-list="false"
    >
      <span class="text" v-if="!this.value">上传图片</span>
      <img
        v-else
        class="el-upload-list__item-thumbnail avatar"
        :src="value" alt=""
      >
      <i class="el-icon-circle-close"></i>

    </el-upload>

  </div>
</template>

<script>
// 1.安装 yarn add cos-js-sdk-v5
// 2.引入 yarn add cos-js-sdk-v5
import COS from 'cos-js-sdk-v5' // 导入腾讯云的包(sdk)
// 3.创建一个实例
const cos = new COS({
  SecretId: 'AKIDmOozwgCUYO0NWP6f1EE2bw67uToxsYyC', // 身份识别ID
  SecretKey: '5xjHdleKm12pRr2xe6MNDqHTVM1UkmZ8' // 身份秘钥
})
export default {
  name: 'ImageUpload',
  props: {
    value: {
      type: String
    }
  },
  data () {
    return {
      // 弹窗显示状态
      isShow: false,
      // 默认图片地址
      imgSrc: '',
      // 默认展示图片
      list: []
    }
  },
  computed: {
    // 优化是否全部上传完毕
    isAllselect () {
      return this.list.every((item) => item.status === 'success')
    }
  },
  methods: {
    // 图片上传逻辑
    handleUpload ({ file }) {
      // console.log(1)
      // 找到上传成功那一项
      const pic = this.list.find((item) => item.uid === file.uid)
      // 收集到上传的文件对象, 传递到腾讯云服务器上
      cos.putObject(
        {
          Bucket: 'hrsaas-pic-1314876268' /* 存储桶名称 */,
          Region: 'ap-shanghai' /* 存储桶所在地域，必须字段 */,
          Key:
            +new Date() +
            file.name /* (字符串类型) 必须 上传到腾讯云存储的图片的名称 key保证唯一性 */,
          StorageClass: 'STANDARD', // 标准的存储方案
          Body: file // 上传文件对象

        },
        (err, data) => {
          // 将函数改成箭头函数, 后期会处理到data中的数据
          // 上传成功后会打印data ,上传失败会得到err对象
          // console.log(err || data)
          if (err) return this.$message.error('上传失败,请稍后重试')
          // 上传完成 得到data data中有一个 Location 字段 就是腾讯云存储的图像地址
          // console.log(data)
          // 将腾讯云返回的地址存储到数据库中
          pic.url = `https://${data.Location}`
          // 将上传成功后的对象的状态改成 success
          pic.status = 'success'
          this.$nextTick(() => {
            this.imgSrc = `https://${data.Location}`
          })
          this.$emit('input', `https://${data.Location}`)
        }
      )
    },
    // 文件改变时触发的函数
    handleChange (file, fileList) {
      this.list = [...fileList]
    },
    // 上传前文件大小的校验和一些文件类型
    beforeUpload (file) {
      const size = file.size / 1024 / 1024 < 1
      if (!size) {
        this.$message.error('文件大小不得超过1M')
        return false
      } else {
        return true
      }
    }
  }
}
</script>

<style lang='less' scoped>
.disable {
  ::v-deep .el-upload--picture-card {
    display: none;
  }
}
// .avatar-uploader{
//     display: inline-block;
//     vertical-align: middle;
//     line-height: 1;
// }
/deep/ .questionsNew .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    width: 100px;
    height: 60px;
    line-height: 60px;
    margin-left: 6px;
}
.questionsNew .avatar-uploader i {
    position: absolute;
    right: 0;
    top: 0;
    -webkit-transform: translate(50%,-50%);
    transform: translate(50%,-50%);
    background: #fff;
    font-size: 18px;
    color: #999;
}
.avatar{
    width: 100px;
    height: 60px;
    display: block;
    overflow: hidden;
}
</style>
